<!DOCTYPE html>
<!-- saved from url=(0066)http://wap.js.10086.cn/hyl/CAC/wpactivity/hxhzyItem/hxhzyItem.html -->
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang=en>
    <meta content="text/html; charset=UTF-8" http-equiv=Content-Type>
    <meta name=viewport
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
    <meta name=apple-mobile-web-app-capable content=yes>
    <meta name=apple-mobile-web-app-status-bar-style content=black>
    <meta name=GENERATOR content="MShtml 8.00.6001.23588">
    <title>条形码扫描示例</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/default.css" rel="stylesheet"/>
    <script type="text/javascript" src="bootstrap/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript" src="js/quagga.min.js"></script>
    <script type="text/javascript" src="js/LocalResizeIMG.js"></script>
    <script type="text/javascript" src="js/patch/mobileBUGFix.mini.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <style>
        table {
            /*margin: auto;*/
        }

        .col-2-h-t {
            background-color: #990033;
            color: #FFFFFF;
            font-weight: bold;
            border-radius: 5px 0px 0px 0px;
            text-align: left;
        }

        .col-2-h {
            float: left;
            width: 25%;
            padding-left: 10px;
            padding-right: 5px;
            font-weight: bold;
            background-color: #990033;
            color: #FFFFFF;
            text-align: left;
        }

        .col-2-h-f {
            font-weight: bold;
            background-color: #990033;
            color: #FFFFFF;
            border-radius: 0px 0px 0px 5px;
            text-align: left;
        }

        .col-2-c-t {
            background-color: #D8D8D8;
            border-radius: 0px 5px 0px 0px;
            text-align: left;
        }

        .col-2-c {
            float: left;
            width: 75%;
            padding-left: 10px;
            padding-right: 5px;
            background-color: #D8D8D8;
            text-align: left;
        }

        .col-2-c-f {
            background-color: #D8D8D8;
            border-radius: 0px 0px 5px 0px;
            text-align: left;
        }

        .contents {
            width: 98%;
            float: center;
            margin-left: 3px;
        }

        .input {
            border-color: #cccccc;
            font-size: 14px;
            padding: 6px;
            border-width: 2px;
            border-radius: 0px;
            border-style: solid;
        }

        .column {
            width: 25%;
            font-weight: bold;
            background-color: #990033;
            color: #FFFFFF;
            text-align: left;
        }

        .column2 {
            width: 25%;
            font-weight: bold;
            background-color: #D8D8D8;
            /*border-radius: 0px 5px 0px 0px;*/
            text-align: left;
        }

        .columnLeft {
            border-radius: 5px 0px 0px 0px;
        }

        .column2Right {
            border-radius: 0px 0px 0px 5px;
        }

        .inline {
            display: inline;
        }

        .input-group-addon:hover {
            background-color: rgb(66, 141, 199);
        }
    </style>
</head>
<body>
<div class="container" id="app">
    <div class="panel">
        <div class="panel-body">
            <div class="row">
                <table style="margin-left: 3%">
                    <tr>
                        <td>
                            <img src="download.jpg" height="130px" width="130px">
                        </td>
                        <td>&nbsp &nbsp</td>
                        <td>
                            <h3>验证码检索</h3>
                            <br>
                            <br>
                            请点击链接进行扫描序列号
                        </td>
                    </tr>
                </table>
                <br>
                <div class=" col-md-12">
                    <form>
                        <div class="input-group">
                            <span class="input-group-addon" id="camera" onclick="$('#code').click();"
                                  style="cursor: pointer">扫描</span>
                            <input type="text" class="form-control input-lg" id="result" placeholder="请点击链接进行扫描序列号"
                                   v-model="code"/>
                            <span class="input-group-addon" id="requestData" style="cursor: pointer"
                                  v-on:click="getData">搜索</span>
                            <input id="code" class="pad10 b-f" style="display: none;" type="file" accept="image/*"/>
                        </div>

                    </form>
                </div>
                <div id="infoDetail" v-if="Datum.length>0">
                    <br>
                    <h3>详细信息</h3>
                    <br>
                    <table style="margin: auto;table-layout:fixed;width:100%" v-for="myresult in Datum">
                        <tr>
                            <td class="column col-2-h-t">客户编码</td>
                            <td class="column2 col-2-c-t">{{myresult.CUSTKEY}}</td>
                        </tr>
                        <tr>
                            <td class="column">客户名称</td>
                            <td class="column2">{{myresult.CUST_DESCRIPTION}}</td>
                        </tr>
                        <tr>
                            <td class="column">产品条码</td>
                            <td class="column2">{{myresult.BARCODE1}}</td>
                        </tr>
                        <tr>
                            <td class="column">产品名称</td>
                            <td class="column2">{{myresult.SKU_DESCRIPTION}}</td>
                        </tr>
                        <tr>
                            <td class="column">生产日期</td>
                            <td class="column2">{{myresult.LOTTABLE01}}</td>
                        </tr>
                        <tr>
                            <td class="column">年根</td>
                            <td class="column2">{{myresult.LOTTABLE02}}</td>
                        </tr>
                        <tr v-if="myresult.LOTTABLE03">
                            <td class="column">invoice No</td>
                            <td class="column2">{{myresult.LOTTABLE03}}</td>
                        </tr>
                        <tr v-if="!myresult.LOTTABLE03 && myresult.LOTTABLE04">
                            <td class="column">invoice No</td>
                            <td class="column2">{{myresult.LOTTABLE04}}</td>
                        </tr>
                        <tr v-if="myresult.LOTTABLE04">
                            <td class="column">生产批号</td>
                            <td class="column2">{{myresult.LOTTABLE04}}</td>
                        </tr>
                        <tr v-if="!myresult.LOTTABLE04 && myresult.LOTTABLE03">
                            <td class="column">生产批号</td>
                            <td class="column2">{{myresult.LOTTABLE03}}</td>
                        </tr>
                        <tr v-if="!myresult.LOTTABLE03 & !myresult.LOTTABLE04">
                            <td class="column">生产批号</td>
                            <td id="id8" class="column2">请拨打 021-6067-2792</td>
                        </tr>
                        <tr>
                            <td class="column col-2-h-f">出库日期</td>
                            <td class="column2 col-2-c-f">{{myresult.CONFIRMDATE}}</td>
                        </tr>
                    </table>
                </div>
                <div id="noData" v-if="noData"><h3 style="color:red;">没有数据 !!!</h3></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">


    $(document).ready(function () {

        //文件上传
        $.each($('input:file'), function (index, item) {
            //文件压缩
            $(item).localResizeIMG({
                //width : 800,
                quality: 1,
                before: function () {
                    util.showMask();
                },
                success: function (result) {
                    var imgData = result.clearBase64;
                    Quagga.decodeSingle({
                        //解码方式，与条形码的编码方式有关
                        decoder: {
                            readers: ["code_128_reader", "ean_reader", "ean_8_reader", "code_39_reader", "code_39_vin_reader", "codabar_reader", "upc_reader", "upc_e_reader", "i2of5_reader"] // List of active readers
                        },
                        locate: true, // try to locate the barcode in the image
                        src: 'data:image/jpg;base64,' + imgData // or 'data:image/jpg;base64,' + data
                    }, function (result) {
                        if (result) {
                            if (result.codeResult) {
                                $("#result").val(result.codeResult.code);
                                //让vue识别修改的值
                                $("#result")[0].dispatchEvent(new Event('input'))
                            } else {
                                $("#result").val("");
                                alert("未扫码成功，请重新扫码!");
                            }
                        } else {
                            alert("挂了!");
                            $("#result").val("");
                        }
                        util.removeMask();
                    });
                }
            })
            ;
        })
    })

    var app = new Vue({
        el: '#app',
        data: {
            code: '',
            noData: false,
            Datum: []
        },
        methods: {
            getData: function () {
                if (!this.code) {
                    alert(this.code)
                    alert(app.code)
                    return;
                }
                axios.get('getData?code=' + this.code)
                    .then(function (response) {
                        if (response.data.length > 0) {
                            app.noData = false;
                            app.Datum = response.data;
                        } else {
                            app.Datum = [];
                            app.noData = true;
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            }
        }
    })
</script>
</body>
</html>